<template>
  <!-- <div class="dialog-overlay" @click.self="clickOutSide()"> -->
  <div class="dialog-overlay">
    <div class="tip-dialog" transition="dialog">
      <div class="title">{{ title }}</div>
      <div class="content" v-show="!isEmpty(content)">{{ content }}</div>
      <div class="dialog-btns">
        <div class="cancel" @click="onClickAction(0)">取消</div>
        <div class="sure" @click.stop="onClickAction(1)">确定</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="TipDialog">
import { isEmpty } from '@/utils/httputils'
//参数接收:fix(true时点击外部不关闭)const props =
defineProps(['title', 'content', 'fix'])
//声明回调事件，执行回调事件:emit('onClick')
// const emit = defineEmits(['onClickCallBack'])
const emit = defineEmits<{ (e: 'clickCallback', type: number): void }>()
function onClickAction(type: number) {
  // 触发自定义事件通知父组件，在.ts传入clickCallback要改成onClickCallback
  emit('clickCallback', type)
}
// function clickOutSide() {
//   if (props.fix) {
//     //点击外部不允许关闭对话框
//     return
//   }
//   emit('clickCallback', 0)
// }
</script>
<style lang="css" scoped>
/* 遮罩层 */
/* .dialog-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
} */

/* 对话框主体 */
.tip-dialog {
  background: white;
  border-radius: 8px;
  padding: 20px;
  min-width: 350px;
  max-width: 60%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: scale(0.9);
}
.title {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: larger;
  font-weight: bold;
  text-align: center;
}
.content {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
/* .btn-parent {
  display: flex;
}
.sure {
  cursor: pointer;
  flex: 1;
  margin: 20px;
  text-align: center;
  background-color: var(--main-color);
  color: white;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.cancel {
  margin: 20px;
  cursor: pointer;
  flex: 1;
  text-align: center;
  border: 1px solid gray;
  border-radius: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
} */
</style>
